<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>自定义指令</h2>
      <!-- <input type="text" v-focus /> -->
      <div v-demo:style.red.50="100">hello</div>
      <div v-demo:style.green.100>world</div>
    </div>

    <script src="../Vue.js"></script>
    <script>
      // 注册一个全局自定义指令 `v-focus`
      // Vue.directive("focus", {
      //   // 当被绑定的元素插入到 DOM 中时……
      //   inserted: function (el) {
      //     // 聚焦元素
      //     el.focus();
      //   },
      // });

      new Vue({
        el: "#app",
        data: {},
        // 局部定义指令
        // directives: {
        //   focus: {
        //     // 指令的定义
        //     inserted: function (el) {
        //       el.focus();
        //     },
        //   },
        // },

        // directives: {
        //   demo: {
        //     bind(el, binding, vnode, oldVnode) {},
        //     inserted(el, binding, vnode, oldVnode) {},
        //     update(el, binding, vnode, oldVnode) {},
        //     componentUpdated(el, binding, vnode, oldVnode) {},
        //     unbind(el, binding, vnode, oldVnode) {},
        //   },
        // },
        // 在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写：
        directives: {
          demo(el, binding, vnode, oldVnode) {
            console.log(el); // el表示挂载的元素
            console.log(binding);
            /*
              arg: "a" 指令参数
              def: {bind: ƒ, update: ƒ} 执行了哪些生命周期
              expression: "100"  等号后面的值
              modifiers: {b: true, c: true}  修饰符
              name: "demo"  指令名称
              rawName: "v-demo:a.b.c" 完整指令
              value: 100 等号后面的值
            */

            const { arg, modifiers } = binding;
            const [size, color] = Object.keys(modifiers);
            el[arg].color = color;
            el[arg].fontSize = size + "px";
          },
        },
      });
    </script>
  </body>
</html>
